<template>
  <div>
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" icon="el-icon-lx-add" @click="PowerAdd()">新建</el-button>

      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
        <el-table-column prop="powerName" label="权限 "></el-table-column>
<!--        <el-table-column label="操作" width="180" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button-->
<!--              type="text"-->
<!--              icon="el-icon-folder"-->
<!--              @click="permissionView(scope.row)"-->
<!--            >查看权限-->
<!--            </el-button>-->
<!--            <el-button-->
<!--              type="text"-->
<!--              icon="el-icon-edit"-->
<!--              @click="handleSelect(scope.row)"-->
<!--            >编辑-->
<!--            </el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
    </div>

<!--    <el-dialog title="查看权限" :modal="false" :visible.sync="viewVisible" width="50%">-->

<!--      <el-table :data="tableData">-->
<!--        &lt;!&ndash;        <el-table-column property="role_id" label="ID" width="150"></el-table-column>&ndash;&gt;-->
<!--        <el-table-column property="powerName" label="权限名称" width="200"></el-table-column>-->
<!--      </el-table>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--        <el-button @click="viewVisible = false">确 定</el-button>-->
<!--      </span>-->
<!--    </el-dialog>-->

    <el-dialog title="新建" :modal="false" :visible.sync="addVisible" width="50%">
      <el-form
        ref="add"
        :model="add"
        label-width="80px"
        class="demo-ruleForm"


      >
        <el-form-item label="权限名" prop="powerName">
          <el-input v-model="add.powerName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAdd('add')">确 定</el-button>
            </span>
    </el-dialog>



<!--    <el-dialog title="编辑" :modal="false" :visible.sync="editVisible" width="30%">-->
<!--      <el-form ref="form" :model="form" label-width="70px" :rules="rules">-->
<!--        <el-form-item label="用户名" prop="roleName">-->
<!--          <el-input v-model="form.roleName"></el-input>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--        <el-button @click="editVisible = false">取 消</el-button>-->
<!--        <el-button type="primary" @click="saveEdit('form')">确 定</el-button>-->
<!--      </span>-->
<!--    </el-dialog>-->
  </div>

</template>

<script>
  import {powerList} from '../../network/powerList'
  import {savePower} from '../../network/savePower'

  export default {
    name: 'RoleManage',
    data () {
      return {
        add: {

          powerName:''
        },
        rules: {
          id: [{
            required: true,
            message: '角色ID',
            trigger: 'blur',
          }],
          roleName: [{
            required: true,
            message: '角色名',
            trigger: 'blur',
          }],
        },

        tableData: [], // 获取的数据
        // multipleSelection: [],
        // delList: [],
        editVisible: false, // 编辑弹出框false隐藏，true显示
        viewVisible: false, // 新建弹出框false隐藏，true显示
        addVisible: false,
        total: 0,
        form: {}
        // size: 10,
        // current: 1,
        // idx: -1,
        // id: -1,
        // dialogVisible: false,
      }
    },
    created () {
      this.getData()
    },
    methods: {
      // 初始化数据
      getData () {
        console.log('表单')
        powerList()
          .then((res) => {
            console.log(res)
            if (res.data.code === 80200) {
              console.log(res)
              this.tableData = res.data.data
              this.tableData.forEach(item => {
                item.status = Boolean(item.status)
              })

              this.total = res.data.data.total
              // this.size = res.data.data.size
              // this.current = res.data.data.current
            } else {
              this.$message.error('数据获取失败，' + res.data.data.msg)
            }
          })
          .catch(() => {
            this.$message.error('数据获取失败，请在保证网络畅通的情况下检查请求的地址或参数是否正确')
          })
      },

      PowerAdd () {
        this.addVisible = true
      },
      // 保存新建
      saveAdd (add) {
        console.log('添加')
        console.log(this.add)
        this.$refs[add].validate((valid) => {
          if (valid) {
            this.addVisible = false
            let formData = new FormData();
            // formData.append('id',this.add.id)
            formData.append('powerName',this.add.powerName)
            savePower(formData)
              .then((res) => {
                console.log(res)
                if (res.data.code === 80200) {
                  this.$message.success('新建用户成功')
                  this.getData()
                } else {
                  this.$message.error('新建用户失败')
                  this.getData()
                }
                this.addVisible = false
              })
              .catch(() => {
                this.$message.error('数据获取失败，请在保证网络畅通的情况下检查请求的地址是否正确')
              })
          } else {
            this.$message.error('请按照指定格式输入')
            return false
          }
        })
      },


      // 保存编辑
      saveEdit (form) {
        console.log('编辑')
        console.log(this.form)
        this.$refs[form].validate((valid) => {
          if (valid) {
            this.editVisible = false
            let formData = new FormData();
            formData.append('role_id',this.form.role_id)
            formData.append('id',this.form.user_id)
            updateStatData(formData)
              .then((res) => {
                console.log(res)

                if (res.data.code === 80200) {
                  // 表示更新成功
                  this.$message.success(`修改第 ${this.idx + 1} 行成功`)
                  this.$set(this.tableData, this.idx, this.form)
                  this.getData()
                } else {
                  // 表示更新失败
                  this.editVisible = false
                  this.$message.error(`修改第 ${this.idx + 1} 行失败`)
                  this.getData()
                }
              })
              .catch(() => {
                this.$message.error('数据获取失败，请在保证网络畅通的情况下检查请求的地址是否正确')
              })
          } else {
            this.$message.error('请按照指定格式输入')
            return false
          }
        })
      },

      handleSelect(){

      },
      view () {

      },
      // 分页导航
      handlePageChange (val) {
        alert('请求的页数：' + val)

        // 调用方法：this.$set( target, key, value )
        // target：要更改的数据源(可以是对象或者数组)
        // key：要更改的具体数据
        // value ：重新赋的值
        this.$set(this.query, 'pageIndex', val)
        this.getData(val)
      },

      formatJson (filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },

    },
  }

</script>

<style scoped>

</style>
